<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { onMounted } from 'vue'
import earth from '../../../../../public/flylineChart/earth (1).jpg'
import starfield from '../../../../../public/flylineChart/starfield.jpg'

onMounted(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        backgroundColor: '#000',
        globe: {
            baseTexture: earth,//此处官方文档中提供的图片链接不能直接用，会出现跨域问题，需要根据链接在浏览器打开该图片，然后再ctrl+s保存图片，再移动至项目本地，即可使用
            shading: 'lambert',
            environment: starfield,//此处官方文档中提供的图片链接不能直接用，会出现跨域问题，需要根据链接在浏览器打开该图片，然后再ctrl+s保存图片，再移动至项目本地，即可使用
            atmosphere: {
                show: true
            },
            light: {
                ambient: {
                    intensity: 0.1
                },
                main: {
                    intensity: 1.5
                }
            }
        },
        series: []
    };

    // 响应式调整大小
    const handleResize = () => {
        myChart?.resize();
    };

    option && myChart.setOption(option);
    window.addEventListener('resize', handleResize);
})




</script>

<template>
    <div id="main" class="wh100"></div>
</template>

<style scoped></style>
